Vector.SVG.ns = 'http://www.w3.org/2000/svg';

Vector.SVG.util = function(){
	return {
		tweakParams: function(config){
			this.config['stroke-width'] = config.opt.strokeweight || this.config.strokeweight;
			this.config.fill = config.opt.fillcolor || this.config.fillcolor || this.config.fill;
			this.config.stroke = config.opt.strokecolor || this.config.strokecolor;
			delete this.config.strokecolor;
			delete this.config.fillcolor;
			delete this.config.strokeweight;
		},
		tweakLineParams: function(config){
			var o = config.opt;
			this.config['stroke-width'] = config.opt.strokeweight || this.config.strokeweight;
			this.config.fill = config.opt.fillcolor || this.config.fillcolor;
			this.config.stroke = config.opt.strokecolor || this.config.strokecolor;
			delete this.config.strokecolor;
			delete this.config.fillcolor;
			delete this.config.strokeweight;
			Ext.apply(this.config,{x1:o.fromx,x2:o.tox,y1:o.fromy,y2:o.toy})
			Vector.util.deleteProps(o,['fromx','fromy','tox','toy']);
		}	
	}
}();
Vector.SVG.Line = function(config){
		
		Vector.SVG.Line.superclass.constructor.call(this, config);
		this.lineTemplate = this.createEl(Vector.SVG.ns,'line');
		Ext.apply(this.config,{'style':'left:0;top:0;stroke:blue;','strokecolor':'blue','strokeweight':'2'});
		Vector.SVG.util.tweakLineParams.createDelegate(this,[config])();
		
		Ext.apply(this.config,config.opt);
		delete config.opt;
		
		Vector.util.SA(this.lineTemplate, this.config);
		Ext.apply(this,config);
     	
	}
Ext.extend(Vector.SVG.Line, Vector.Line, {
    draw: function(o){
    		var el = this.lineTemplate.cloneNode(false);
			if(!o.id){o.id=Ext.id();}
			Ext.apply(this.config, o);
    		Vector.util.SA(el, this.config);
			if(o.strokewidth){el.setAttribute('stroke-width',o.strokeweight);}
			Ext.get(this.parent).appendChild(el);		
    }
});	
Vector.SVG.Box = function(config){
Vector.SVG.Box.superclass.constructor.call(this,config);

	this.boxTemplate = this.createEl(Vector.SVG.ns,'rect');
	
	Vector.SVG.util.tweakParams.createDelegate(this,[config])();

	Ext.apply(this.config,config.opt);
	delete config.opt;
	Vector.util.SA(this.boxTemplate, this.config);
	Ext.apply(this,config);

}
Ext.extend(Vector.SVG.Box, Vector.Box,{
    draw: function(o){
    		var el = this.boxTemplate.cloneNode(false);
			if(!o.id){o.id=Ext.id();}
			Vector.util.SA(el,o);
			if(!o.text && this.text){
				o.text = this.text;
			}
			Ext.get(this.parent).appendChild(el);
			if(o.text){
				Ext.apply(o,{'fill':'black',x:20,y:15});
				var t = document.createElementNS('http://www.w3.org/2000/svg','text')
				Vector.util.SA(t,o);
				t.textContent = o.text;
				Ext.get(this.parent).appendChild(t);
			};
    }
});
Vector.SVG.RoundBox = function(config){
//	this.boxTemplate = new Ext.Template('<g transform="translate({left},{top})"><rect id="{id}" ' + 
//	        ' class="{cls}" style="position:relative;" x="0" y="0" fill="{fill}" ' +
//	        'width="{width}" height="{height}" stroke="{strokecolor}" strokewidth="{strokeweight}" rx="20">' + 
//	        '</rect><text x="5" y="15" font-family="Verdana" font-size="9">{text}</text></g>').compile();
//	this.boxTemplate = document.createElementNS('http://www.w3.org/2000/svg','rect');
	config.opt.rx = 20;
	Vector.SVG.RoundBox.superclass.constructor.call(this, config);
//	this.props = {stroke:'blue','stroke-width':2,x:0,y:0,rx:20,'fill':'none'};
//	Ext.apply(this.props,config.opts);
//	Vector.util.SA(this.boxTemplate,this.props);

//	Ext.apply(this,config);
	
}
Ext.extend(Vector.SVG.RoundBox, Vector.SVG.Box,{
    getBox: function(o){
    		var el = this.boxTemplate.cloneNode(false);
    		if(!o.id){o.id=Ext.id();}
    		if(!o.strokewidth){o.strokewidth = 1;}
			Vector.util.SA(el,o);
			return el;
    }
});
Vector.SVG.Polyline = function(config){

	Vector.SVG.Polyline.superclass.constructor.call(this,config);
	Ext.apply(this.config,{fill:'none',stroke:'blue',"strokeweight":'2'});
	
	Vector.SVG.util.tweakParams.createDelegate(this,[config])();

	Ext.apply(this.config,config.opt);
	delete config.opt;
	
	Ext.apply(this,config);
	this.polyTemplate = this.createEl(Vector.SVG.ns, 'polyline');
	Vector.util.SA(this.polyTemplate,this.config);
	
}
Ext.extend(Vector.SVG.Polyline, Vector.Polyline,{
    draw: function(o){
    		var el = this.polyTemplate.cloneNode(false);
			if(!o.id){o.id=Ext.id();}
//			Vector.SVG.util.tweakParams.createDelegate(this,[config])();
			Ext.apply(this.config,{'id': o.id,'points':o.pts,'stroke':o.stroke||this.config.stroke,'stroke-width':o.strokewidth||this.config['stroke-width']});
			Ext.get(this.parent).appendChild(el);
    }
});
Vector.SVG.Canvas = function(config){
	Ext.apply(this,config);

	this.svg = this.createEl(Vector.SVG.ns,'svg');

	Vector.util.SA(this.svg, {width:'100%', height:'100%'});
	Vector.SVG.Group.superclass.constructor.call(this);
}
Ext.extend(Vector.SVG.Canvas,Vector.Group,{
	render: function(){
		if(!this.id){this.id = Ext.id();}
		Vector.util.SA(this.svg,{id:this.id,x:this.left,y:this.top});

		Ext.get(this.parent).appendChild(this.svg);
	}
});
Vector.SVG.Group = function(config){
	Ext.apply(this,config);
	this.groupTemplate = this.createEl(Vector.SVG.ns,'g');
	Vector.util.SA(this.groupTemplate, {width:'100%', height:'100%'});
	Vector.SVG.Group.superclass.constructor.call(this);
}
Ext.extend(Vector.SVG.Group,Vector.Group,{
	render: function(){
		if(!this.id){this.id = Ext.id();}
		Vector.util.SA(this.groupTemplate,{id:this.id,x:this.left,y:this.top});
		Ext.get(this.parent).appendChild(this.groupTemplate);
	}
});

